<template>
  <div>
    <el-card shadow="never" class="shadow-md">
      <el-row>
        <el-form
            ref="formRef"
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
        >
          <el-form-item label="用户名">
            <el-input v-model="formInline.username" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="submitForm(formRef)">查询</el-button>
            <el-button :icon="Refresh" @click="resetForm(formRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="mb-4 flex justify-between">
        <div>
          <el-button type="primary" :icon="Plus" @click="submitForm(formRef)">新增</el-button>
          <el-button type="warning" plain :icon="Bottom" @click="resetForm(formRef)">导入</el-button>
          <el-button type="success" plain :icon="Top" @click="resetForm(formRef)">导出</el-button>
          <el-button type="danger" :icon="Delete" disabled @click="resetForm(formRef)">批量删除</el-button>
        </div>
        <div>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="下载Excel空模板"
              placement="top"
          >
            <el-button :icon="Download" circle />
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="隐藏搜索栏"
              placement="top"
          >
            <el-button :icon="Hide" circle />
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="刷新表格"
              placement="top"
          >
            <el-button :icon="Refresh" circle />
          </el-tooltip>
        </div>
      </el-row>
      <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          highlight-current-row
          v-loading
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center', background: '#e8deef', color: '#1a1919', fontWeight: 'bold' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed type="index" label="#" width="50" />
        <el-table-column sortable prop="date" label="日期" width="150" />
        <el-table-column prop="name" label="名称" width="120" />
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="gender" label="性别" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="status" label="开关" width="120">
          <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
            />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="内容溢出提示" width="240" show-overflow-tooltip/>
        <el-table-column prop="tag" label="标签" width="100" :filters="[
        { text: 'Home', value: 'Home' },
        { text: 'Office', value: 'Office' },
      ]" :filter-method="filterTag" filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag :type="scope.row.tag.type" disable-transitions>{{ scope.row.tag.text }}</el-tag>
          </template>
        </el-table-column>

        <!-- 表格右侧固定操作列  -->
        <el-table-column fixed="right" label="操作" min-width="220">
          <template #default="scope">
            <el-button link type="success" :icon="Search" @click="handleDetail">
              详情
            </el-button>
            <el-button link type="warning" :icon="Edit" @click.prevent="handleEdit">
              编辑
            </el-button>
            <!-- 弹出确认框 -->
            <el-popconfirm
                width="180px"
                confirm-button-text="确认"
                confirm-button-type="danger"
                cancel-button-text="取消"
                title="您确定要删除此行吗?"
                @confirm="handleDelete(scope.$index)"
            >
              <template #reference>
                <el-button link type="danger" :icon="Delete">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end items-center h-10 mt-5">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="修改"
      draggable
      align-center
      style="padding: 40px"
      :show-close="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h3 :id="titleId" :class="titleClass">修改</h3>
        <el-button link>
          <el-icon size="large" @click="close"><Close /></el-icon>
        </el-button>
      </div>
    </template>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名" label-position="right">
        <el-input v-model="formInline.user" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="密码" label-position="right">
        <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time" label-position="right">
        <el-date-picker
            v-model="formInline.date"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>

<!--    <el-form-->
<!--        :inline="true"-->
<!--        :model="form"-->

<!--        style="max-width: 600px"-->
<!--        class="demo-form-inline"-->
<!--    >-->
<!--      <el-form-item label="用户名">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="密码">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="姓名">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="手机号">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="角色">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="岗位">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="部门">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="邮箱">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="昵称">-->
<!--        <el-input v-model="form.name" placeholder="Approved by" clearable />-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {type ComponentSize, dayjs, FormInstance} from "element-plus";
import {
  Bottom,
  CaretBottom,
  Close,
  Delete,
  Download,
  Edit, Hide,
  Plus,
  Refresh,
  Search,
  Top,
  Warning
} from "@element-plus/icons-vue";

// 弹出框
const dialogVisible = ref(false)
const form = reactive({
  name: '',
  region: '',
  date: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


// 表格搜索
const formRef = ref<FormInstance>()
const formInline = reactive({
  username: '',
  phone: '',
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

interface User {
  date: string
  name: string
  address: string
  tag: string
}
const tableData: User[] = ref([
  {
    date: '2016-05-01',
    name: '张三',
    age: 18,
    gender: '男',
    email: '123456@qq.com',
    status: true,
    city: 'Los Angeles',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    zip: 'CA 90036',
    tag: { type: 'primary', text: '基础' }
  },
  {
    date: '2016-05-03',
    name: '王二',
    age: 20,
    gender: '女',
    email: '123456@qq.com',
    status: false,
    city: 'Los Angeles',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    zip: 'CA 90036',
    tag: { type: 'success', text: '成功' }
  },
  {
    date: '2016-05-02',
    name: '李四',
    age: 19,
    gender: '男',
    email: '123456@qq.com',
    status: false,
    city: 'Los Angeles',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    zip: 'CA 90036',
    tag: { type: 'warning', text: '警告' }
  },
  {
    date: '2016-05-01',
    name: '张三',
    age: 18,
    gender: '男',
    email: '123456@qq.com',
    status: true,
    city: 'Los Angeles',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    zip: 'CA 90036',
    tag: { type: 'info', text: '常规' }
  },
  {
    date: '2016-05-03',
    name: '王二',
    age: 20,
    gender: '女',
    email: '123456@qq.com',
    state: false,
    city: 'Los Angeles',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    zip: 'CA 90036',
    tag: { type: 'danger', text: '常规' }
  },
])

// 多选器选择的数据
const multipleSelection = ref<User[]>([])
// 多选器选择的数据
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 查看行详情
const handleDetail = () => {
  console.log('click')
  dialogVisible.value = true
}

// 编辑行
const handleEdit = () => {
  console.log('click')
  dialogVisible.value = true
}

// 删除行
const handleDelete = (index: number) => {
  tableData.value.splice(index, 1)
}

const now = new Date()
const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD'),
    name: '汤姆',
    age: 20,
    gender: '女',
    email: '123456@qq.com',
    status: '广东',
    city: '深圳',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: { type: 'danger', text: '成功' }
  })
}


// 分页相关
const currentPage = ref(4)
const pageSize = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>